<template>
    <div id="box" class="container"></div>
</template>

<script>
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

var scene, camera, renderer, stats, controls, mixer, clock;
export default {
    mounted() {
        clock = new THREE.Clock();
        const container = document.getElementById('box');

        stats = new Stats();
        container.appendChild(stats.dom);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = THREE.sRGBEncoding;
        container.appendChild(renderer.domElement);

        const pmremGenerator = new THREE.PMREMGenerator(renderer);

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbfe3dd);
        scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;

        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
        camera.position.set(5, 2, 8);

        controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0.5, 0);
        controls.update();
        controls.enablePan = false;
        controls.enableDamping = true;

        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('three-lib/libs/draco/gltf/');

        const loader = new GLTFLoader();
        loader.setDRACOLoader(dracoLoader);
        let _this = this;
        loader.load(
            '3d/LittlestTokyo.glb',
            function (gltf) {
                const model = gltf.scene;
                model.position.set(1, 1, 0);
                model.scale.set(0.01, 0.01, 0.01);
                scene.add(model);

                mixer = new THREE.AnimationMixer(model);
                mixer.clipAction(gltf.animations[0]).play();

                _this.animate();
            },
            undefined,
            function (e) {
                console.error(e);
            }
        );

        window.onresize = function () {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);
        };
    },
    methods: {
        animate() {
            requestAnimationFrame(this.animate);
            const delta = clock.getDelta();
            mixer.update(delta);
            controls.update();
            stats.update();
            renderer.render(scene, camera);
        }
    }
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
}
</style>
